<template>
  <div class="app-container">
    <!-- 表格 -->
    <StuTable
      max-height="700"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :stripe="true"
      border
      :list="tableData"
      :columns="columns"
    >
      <!--修改密码-->
      <template v-slot:renew="{ scope }">
        <div class="renew">
          <span @click="handleRenew(scope, 'pwd')">修改密码</span>
        </div>
      </template>

      <!-- 账号地址 -->
      <template v-slot:accountAddr="{ scope }">
        <div>
          https://app.tuomaimai.com/home?shopUuid={{ scope.row.shopUuid }}
        </div>
      </template>
    </StuTable>
    <!-- 分页 -->
    <Pagination
      :total="pageConfig.total"
      :page.sync="pageConfig.page"
      :pageSizes="undefined"
      :pageSize.sync="pageConfig.pageSize"
      @pagination="getPagination"
    />
    <!-- 修改密码 -->
    <UpdatePassword
      v-if="dialogs.updatePassword"
      :visible.sync="dialogs.updatePassword"
      :roleInfo="dialogs.row"
      @updateData="getShopList"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import UpdatePassword from "./components/UpdatePassword";
import { getShopList } from "@/api";
export default {
  name: "Account",
  components: {
    Pagination,
    UpdatePassword
  },
  data() {
    return {
      //表单数据--------------------------------------------
      tableData: [],
      //表单配置--------------------------------------------
      columns: [
        // 表格的表头数据及其参数名称
        { name: "厂家名称", value: "shopName" },
        { name: "账号", value: "phone" },
        { name: "公众号地址", value: "accountAddr", slotName: "accountAddr" },
        { name: "修改密码", value: "state", slotName: "renew" }
      ],
      //分页数据--------------------------------------------
      pageConfig: {
        total: 10,
        page: 1,
        pageSize: 10
      },
      //弹窗--------------------------------------------
      dialogs: {
        //编辑密码--------------------------------------------
        updatePassword: false,
        row: {}
      }
    };
  },

  created() {
    this.getShopList();
  },
  methods: {
    //获取厂家账号列表--------------------------------------------
    async getShopList() {
      const params = {
        page: this.pageConfig.page,
        pageSize: this.pageConfig.pageSize
      };
      let res = await getShopList(params).catch(err => console.log(err));
      if (!res) return;
      this.tableData = res.items;
      this.$set(this.pageConfig, "total", res.total);
    },

    //点击--------------------------------------------
    handleRenew(scope, type) {
      switch (type) {
        case "pwd":
          this.$set(this.dialogs, "updatePassword", true);
          this.$set(this.dialogs, "row", scope.row);
          break;
        default:
          break;
      }
    },

    //分页数据-------------------------------------------
    getPagination(data) {
      this.$set(this.pageConfig, "page", data.page);
      this.$set(this.pageConfig, "pageSize", data.pageSize);
      this.getShopList();
    }
  }
};
</script>

<style lang="scss" scoped>
.renew {
  color: $--color-primary;
  & > span {
    cursor: pointer;
  }
}
</style>
